<template>
  <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      :ellipsis="false"
      @select="handleSelect"
  >
    <el-menu-item index="/">
      <img
          style="width: 100px"
          src="@/assets/logo.svg"
          alt="Element logo"
      />
    </el-menu-item>

    <div class="search-input">
      <el-input
          v-model="movie_name"
          style="width: 240px"
          placeholder="输入电影名称"
          class="search-input"
      >
        <template #prefix>
          <el-icon class="el-input__icon"><search /></el-icon>
        </template>
      </el-input>
      <el-button type="primary" @click="select_movie">搜索</el-button>
    </div>


    <el-menu-item index="/login">登录</el-menu-item>
  </el-menu>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import router from "@/router";

const activeIndex = ref('1')
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
  router.push(key)
}

const movie_name = ref('')
function select_movie() {
  // 跳转到搜索页面，由该页面执行查询
  router.push({path: '/search', query: {name: movie_name.value}})
}



</script>

<style>
.el-menu--horizontal {
  display: flex;
  width: 100%;
}

.el-menu--horizontal > .el-menu-item:nth-child(1) {
  margin-right: auto;
}

.search-input{
  margin: 0 auto;
}
</style>